<template>
  <div>
    <div class="rightcon">
      <!-- 房间列表 -->
      <div class="hot_rooms playing_songs my_songs search_songs">
        <h3>
          房间设置
          <div class="btn" type="primary">保存</div>
        </h3>

        <div class="con">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="房间名称">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label="房间公告">
              <el-input v-model="form.notice"></el-input>
            </el-form-item>

            <el-form-item label="二级域名">
              <el-input
                placeholder="请输入一个二级域名前缀"
                v-model="form.two"
              ></el-input>
            </el-form-item>

            <el-form-item label="房间权限">
              <el-select v-model="form.region" placeholder="公开房间">
                <el-option label="公开房间" value="公开房间"></el-option>
                <el-option label="加密房间" value="加密房间"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="全员禁言">
              <el-select v-model="form.region" placeholder="关闭全员禁言">
                <el-option
                  label="关闭全员禁言"
                  value="关闭全员禁言"
                ></el-option>
                <el-option
                  label="开启全员禁言"
                  value="开启全员禁言"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="房间类型">
              <el-select v-model="form.region" placeholder="文字聊天房">
                <el-option label="文字聊天房" value="文字聊天房"></el-option>
                <el-option label="点歌音乐房" value="点歌音乐房"></el-option>
                <el-option label="房主电台房" value="房主电台房"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="机器点歌">
              <el-select v-model="form.region" placeholder="开启机器人点歌">
                <el-option
                  label="开启机器人点歌"
                  value="开启机器人点歌"
                ></el-option>
                <el-option
                  label="关闭机器人点歌"
                  value="关闭机器人点歌"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="点歌间隔">
              <el-input placeholder="0.5" v-model="form.two"></el-input>
            </el-form-item>

            <el-form-item label="顶歌间隔">
              <el-input placeholder="3600" v-model="form.two"></el-input>
            </el-form-item>

            <el-form-item label="日顶次数">
              <el-input placeholder="5" v-model="form.two"></el-input>
            </el-form-item>

            <el-form-item label="点歌人数">
              <el-input placeholder="5" v-model="form.two"></el-input>
            </el-form-item>

            <el-form-item label="投票切歌">
              <el-select v-model="form.region" placeholder="开启投票切歌">
                <el-option
                  label="开启投票切歌"
                  value="开启投票切歌"
                ></el-option>
                <el-option
                  label="关闭投票切歌"
                  value="关闭投票切歌"
                ></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="投票比例">
              <el-select v-model="form.region" placeholder="20%">
                <el-option label="20%" value="20%"></el-option>
                <el-option label="30%" value="30%"></el-option>
                <el-option label="40%" value="40%"></el-option>
                <el-option label="50%" value="50%"></el-option>
                <el-option label="60%" value="60%"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="开启点歌">
              <el-select v-model="form.region" placeholder="开启投票切歌">
                <el-option label="所有人可点" value="所有人可点"></el-option>
                <el-option label="仅房主可点" value="仅房主可点"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <div class="clear">清空聊天记录</div>
      </div>
    </div>
    <!-- <home></home> -->
  </div>
</template>

<script>
import {
  search,
  songList,
  mySongList,
  addSong,
  hotRooms,
} from "@/api/search/index";
import home from "@/views/home";
export default {
  components: {
    home,
  },

  data() {
    return {
      form: {
        name: "",
        notice: "",
        two: "",
      },
      value1: "",
      value2: "",
      roomdata: [],
      messagelist: [],
      inputtext: "",
      sortdata: [
        {
          path: "search_songs",
          icon: "el-icon-s-claim",
          title: "点歌",
        },
        {
          path: "playing_songs",
          icon: "el-icon-s-management",
          title: "已点",
        },
        {
          path: "my_songs",
          icon: "el-icon-s-order",
          title: "歌单",
        },
        {
          path: "hot_rooms",
          icon: "el-icon-s-home",
          title: "房间",
        },
      ],
      input: "",
      songslist: [],
      alreadylist: [],
      mysongslist: [],
      hotrooms: [],
    };
  },

  created() {
    // 获取热门房间
    hotRooms({
      access_token: localStorage.getItem("access_token"),
      plat: "pc",
      version: 10000,
    }).then((res) => {
      console.log(res);
      this.hotrooms = res.data;
    });
  },

  mounted() {},

  methods: {
    // 跳转到目标ID的房间
    toroom() {
      console.log(this.input);
      var index = false;
      index = false;
      this.hotrooms.forEach((el) => {
        if (el.room_id == this.input) {
          index = true;
        } else {
        }
      });
      console.log(index);
      if (index) {
        localStorage.setItem("room_id", this.input);
        this.$router.push({ name: "search_songs" });
      } else {
        this.$notify({
          title: "查找失败",
          message: "暂无查询此房间",
          type: "error",
        });
        this.input = "";
      }
    },
    // 左侧切换右侧
    change(id) {
      console.log(id);
      localStorage.setItem("room_id", id);
      this.$router.push({ name: "search_songs" });
    },
    // 搜索歌曲
    getsongs() {
      search({
        keyword: this.input,
        access_token: localStorage.getItem("access_token"),
        plat: "pc",
        version: 10000,
      }).then((res) => {
        console.log(res);
        this.songslist = res.data;
      });
    },
    // 获取已点歌曲
  },

  computed: {},

  watch: {},
};
</script>

<style scoped lang='less'>
.rightcon {
  // 搜索歌曲列表
  .search_songs {
    width: 360px;
    height: 800px;
    position: absolute;
    right: 0;
    top: 0;
    background-color: #eee;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    z-index: 22;
    h3 {
      height: 30px;
      width: 320px;
      text-align: left;
      padding: 10px 20px;
      background-color: #fff;
    }
    h3 {
      .btn {
        float: right;
        font-size: 10px;
        background-color: #333;
        padding: 6px 12px;
        color: #fff;
        border-radius: 4px;
        font-weight: 400;
        cursor: pointer;
      }
    }
    .con {
      width: 360px;
      height: 695px;
      background-color: #fff;
      overflow: auto;
      margin-top: 10px;
      position: relative;
      .one {
        padding: 0px 80px;
        margin-top: 20px;
        .title {
          margin: 0 30px;
        }
      }
      .el-form-item {
        margin-top: 10px;
        .el-input {
          width: 240px;
        }
        .el-select {
          width: 240px;
        }
      }
    }
    .clear {
      width: 300px;
      position: fixed;
      padding: 12px 30px;
      color: white;
      background-color: red;
    }
  }
}
</style>